<template>
  <a-spin :loading="spinLoading" :size="35" class="w-[100%]" tip="正在处理, 请稍候...">
    <a-form ref="formRef" :model="form" :rules="rules" auto-label-width layout="vertical">
      <a-row justify="space-between">
        <a-form-item class="w-[49%]" field="storageName" label="存储名称" required>
          <a-input v-model="form.storageName" placeholder="存储名称"/>
        </a-form-item>
        <a-form-item v-if="props.params.operationType === proxy.operationType.update.type" class="w-[49%]"
                     field="status" label="存储状态"
                     required>
          <a-select v-model="form.status" allow-clear placeholder="存储状态">
            <a-option v-for="(d, index) in dicts[proxy.DICT.commonNumberStatus]" :key="index" :label="d.dictValue"
                      :value="d.dictKey"/>
          </a-select>
        </a-form-item>
      </a-row>

      <a-form-item field="description" label="说明">
        <a-textarea v-model="form.description" placeholder="说明"/>
      </a-form-item>

      <a-divider orientation="left">存储配置</a-divider>
      <a-row justify="space-between">
        <a-form-item class="w-[49%]" field="storageType" label="存储类型" required>
          <a-select v-model="form.storageType" allow-clear placeholder="存储类型">
            <a-option v-for="(d, index) in dicts[proxy.DICT.storageType]" :key="index" :label="d.dictValue"
                      :value="d.dictKey"/>
          </a-select>
        </a-form-item>
      </a-row>

      <!-- 本地存储 -->
      <local v-if="form.storageType === 'local'" ref="storageConfigRef" :optType="proxy.operationType.update.type"
             :params="form.storageConfig"/>

      <!-- minio -->
      <minio v-if="form.storageType === 'minio'" ref="storageConfigRef" :optType="proxy.operationType.update.type"
             :params="form.storageConfig"/>

      <!-- 七牛云 -->
      <qi-niu v-if="form.storageType === 'qiniu'" ref="storageConfigRef" :optType="proxy.operationType.update.type"
              :params="form.storageConfig"/>

    </a-form>

    <!-- 分割线 -->
    <a-divider class="mt-0"/>

    <div class="flex justify-end">
      <a-space>
        <a-button @click="cancelBtnClick()">取消</a-button>
        <a-button type="primary" @click="okBtnClick()">确定</a-button>
      </a-space>
    </div>
  </a-spin>
</template>

<script setup>
import {getCurrentInstance, reactive, ref, watch} from 'vue'
import {addStorageApi, getStorageByStorageIdApi, updateStorageByStorageIdApi} from "~/api/basic/storage.js";
import Local from "~/pages/basic/storage/Local.vue";
import Minio from "~/pages/basic/storage/Minio.vue";
import QiNiu from "~/pages/basic/storage/QiNiu.vue";

//全局实例
const {proxy} = getCurrentInstance()
//加载字典
const dicts = proxy.LoadDicts([proxy.DICT.commonNumberStatus, proxy.DICT.storageType, proxy.DICT.yesNo])
//接收父组件参数
const props = defineProps({
  params: {
    type: Object,
    default: () => {
    }
  }
})
//父组件函数
const emits = defineEmits(['ok', 'cancel'])
//加载中...
const spinLoading = ref(false)
//表单ref
const formRef = ref(null)
//表单
const form = reactive({
  //存储ID
  storageId: null,
  //存储名称
  storageName: null,
  //存储类型
  storageType: null,
  //说明
  description: null,
  //存储配置
  storageConfig: null,
  //状态
  status: null
})
//表单校验规则
const rules = {
  storageName: [{required: true, message: '存储名称不能为空', trigger: 'submit'}],
  storageType: [{required: true, message: '存储类型不能为空', trigger: 'submit'}],
}
//存储配置
const storageConfigRef = ref()
//确定 -> 点击
const okBtnClick = () => {
  //表单验证
  formRef.value.validate((valid) => {
    if (valid) {
      return false
    }
    if (!storageConfigRef.value) {
      return false
    }
    form.storageConfig = storageConfigRef.value.getStorageConfig()
    //添加
    if (props.params.operationType === proxy.operationType.add.type) {
      spinLoading.value = true
      addStorageApi(form).then(() => {
        proxy.$msg.success(proxy.operationType.add.success)
        emits('ok')
      }).finally(() => {
        spinLoading.value = false
      })
    }
    //修改
    if (props.params.operationType === proxy.operationType.update.type) {
      spinLoading.value = true
      updateStorageByStorageIdApi(form).then(() => {
        proxy.$msg.success(proxy.operationType.update.success)
        emits('ok')
      }).finally(() => {
        spinLoading.value = false
      })
    }
  })
}
//取消 -> 点击
const cancelBtnClick = () => {
  emits('cancel')
}
//加载存储详细信息
const loadStorageInfo = (storageId) => {
  spinLoading.value = true
  getStorageByStorageIdApi(storageId).then(res => {
    //数据赋值
    if (res) {
      for (let key in res) {
        if (form.hasOwnProperty(key)) {
          form[key] = res[key]
        }
      }
    }
  }).finally(() => {
    spinLoading.value = false
  })
}
//监听参数变化
watch(() => props.params, (newVal, oldVal) => {
  //存储ID
  if (props.params.storageId) {
    //加载存储信息
    loadStorageInfo(props.params.storageId)
  }
}, {deep: true, immediate: true})
</script>
<style scoped></style>
